<!--
 * @Descripttion: 库存查询列表
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-10 17:43:24
 -->
<template>
  <div class="app-container">
    <div>
      <el-card shadow="never" class="oper-btn-card">
        <div class="clearfix">
          <div class="fl">
            <el-button type="primary" @click="btnAddData">新增账目</el-button>
          </div>
          <div class="fr">
            <span>收支类别 ：</span>
            <el-select
              v-model="searchData.direction"
              class="w200"
              clearable
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in optionsData.direction"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input
              v-model="searchData.keywords"
              clearable
              style="width: 300px"
              placeholder="搜索账目类型，备注..."
            >
              <el-button slot="append" icon="el-icon-search" type="primary" :loading="btnLoading.search" @click="btnSearch()" />
            </el-input>
          </div>
        </div>
      </el-card>
      <vxe-grid
        ref="table"
        class="grid"
        border
        resizable
        highlight-hover-row
        :loading="tableLoading.stock"
        :edit-config="{trigger: 'click', mode: 'row'}"
        :columns="columnsData"
        :data="tableData.stock"
      />
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.rows"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
    <el-dialog
      title="新增账目"
      width="500px"
      height="90%"
      top="20px"
      :visible.sync="isShowDetail"
      destroy-on-close
      append-to-body
      @closed="onModalClose"
    >
      <Detail v-if="isShowDetail" ref="detail" :data="currentRow" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowDetail = false">取 消</el-button>
        <el-button type="primary" @click="btnSaveData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { getListData, delData, saveOrUpdateData } from '@/api/finance/capital-cat.js'
import Affix from '@/components/Affix'
import { getUpdateButton, getDelButton } from '@/components/Table/oper-btns.js'
import Tab from '@/views/components/Tab'
import Detail from './detail'

export default {
  name: 'CapitalCatList',
  filters: {
  },
  // eslint-disable-next-line vue/no-unused-components
  components: { Detail, Tab, Affix },
  mixins: [oftenuse],
  props: {},
  data() {
    return {
      searchData: { },
      currentRow: {},
      isShowDetail: false,
      optionsData: { direction: [{ value: '0', label: '支出' }, { value: '1', label: '收入' }] },
      columnsData: [
        { type: 'checkbox', align: 'center', width: 60 },
        { title: '操作', width: 80,
          slots: {
            default: (params) => {
              const { row } = params
              const h = this.$createElement
              const viewMoreNode = getUpdateButton(h, {
                props: { type: 'default' }, on: { click: () => { this.btnUpdateData(row) } }
              })
              const delNode = getDelButton(h, {
                props: {},
                attrs: { title: '删除' },
                on: { click: () => { this.btnDelData(row) } }
              })
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, [viewMoreNode, delNode])
              return [divNode]
            }
          }
        },
        { field: 'name', title: '账目类型', width: 150 },
        { field: 'direction', title: '收支类别', width: 150,
          slots: {
            default: (params) => {
              const { direction } = params.row
              const value = direction === '0' ? '支出' : '收入'
              return [<span>{value}</span>]
            }
          }
        },
        { field: 'remarks', title: '备注' }
      ]
    }
  },
  watch: {
  },
  created() {
    this.initData()
  },
  methods: {
    btnDelData(row) {
      this.isAllowDel().then(res => {
        const { id } = row
        this.delData(id)
      })
    },
    btnAddData() {
      this.isShowDetail = true
    },
    btnSaveData() {
      const vm = this.$refs.detail
      const params = vm.getData()
      vm.handleVali().then(_ => {
        this.setBtnLoading('save', true)
        this.saveData(params).then(res => {
          this.setBtnLoading('save', false)
          this.isShowDetail = false
          this.getListData()
        })
      })
    },
    btnUpdateData(row) {
      this.isShowDetail = true
      this.currentRow = row
    },
    btnSearch() {
      this.setBtnLoading('search', true)
      this.getListData().then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    // api
    saveData(params) {
      return new Promise((resolve, reject) => {
        saveOrUpdateData(params).then(res => {
          if (!res.data.flag) return this.$notify.error({ title: '保存失败', message: res.data.message })
          resolve(res)
          this.$notify.success({ title: '保存成功' })
        }).catch(err => {
          reject(err)
          this.$notify.error({ title: '保存异常', message: err.message })
        })
      })
    },
    delData(params) {
      return new Promise((resolve, reject) => {
        delData(params).then(res => {
          if (!res.data.flag) return
          resolve(res)
          this.$notify.success({ title: '删除成功' })
          this.getListData()
        }).catch(err => {
          reject(err)
          this.$notify.error({ title: '删除异常', message: err.message })
        })
      })
    },
    initData() {
      const params = { data: {}, page: this.pageInfo }
      this.getListData(params)
    },
    getListData(params = { data: this.searchData, page: this.pageInfo }) {
      this.setTableLoading('stock', true)
      return new Promise((resolve, reject) => {
        getListData(params).then(res => {
          this.setTableLoading('stock', false)
          if (!res.data.flag) return
          const { records, total } = res.data.data
          this.setTableData('stock', records)
          this.pageInfo.total = total
          resolve(res)
        }).catch(err => {
          this.setTableLoading('stock', false)
          this.$notify.error({ title: '查询异常！', message: err.message })
          reject(err)
        })
      })
    },
    // on
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.getListData()
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
      this.getListData()
    },
    onModalClose() {
      this.currentRow = null
    }
  }
}
</script>
<style lang="scss" scoped>
 .canuse-info{
     color: #636363;
     text-align: center;
     line-height: 26px;
     b { font-size: 24px;}
  }
</style>
